<!DOCTYPE html>
<html>

<body>
  <canvas id="c1" width="800" height="600"></canvas>
  <script>
    var p1 = document.getElementById("c1");
    var c1 = p1.getContext("2d");

    // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    // 以 x,y 为圆心, radius为半径, startAngle为起始弧度, endAngle为结束弧度, anticlockwise 为方向绘制弧形

    // arcTo(x1,y1,x2,y2,radius) 绘制同时与两条直线相切,半径为radius的圆弧, 一条直线为上一个点到(x1,y1)另外一条直线是(x1,y1)到(x2,y2)

    var width = p1.width, height = p1.height;
    // 计算圆心
    var x0ff = width * 0.5,
      y0ff = height * 0.5;
    for (var i = 1; i < 8; i++) {
      // 以最里面的圆点为中心,画同心圆,半径依次增加15
      c1.beginPath();
      c1.arc(x0ff, y0ff, i * 15, 0, Math.PI * 2, true);
      c1.closePath();
      c1.stroke();

    }

  </script>
</body>

</html>